<template>
  <el-form
    ref="ruleForm"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    size="small"
  >
    <el-form-item label="所属社区" prop="groupLeaderCommunity">
      <el-select v-model="ruleForm.groupLeaderCommunity" placeholder="请选择所属社区" class="block">
        <el-option
          v-for="(it,key) in $attrs.communitySelects"
          :label="it.label"
          :value="it.value"
          :key="key"
        ></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="团长名称" prop="groupLeaderName">
      <el-input v-model.trim="ruleForm.groupLeaderName" placeholder="请输入团长名称"></el-input>
    </el-form-item>

    <el-form-item label="团长联系电话" prop="groupLeaderContactNumber">
      <el-input v-model.trim="ruleForm.groupLeaderContactNumber" placeholder="请输入团长联系电话"></el-input>
    </el-form-item>

    <el-form-item label="团长详情地址" prop="groupLeaderAddressDetails">
      <el-input
        type="textarea"
        :rows="4"
        v-model.trim="ruleForm.groupLeaderAddressDetails"
        placeholder="请输入团长详情地址"
      ></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
/* Mixins
------------------------------- */
import { Form } from '@/mixins'

/* Api
------------------------------- */
import {
  checkCommanderConcatNumber
} from '@/api'

/* Model
------------------------------- */
import { commanderModel, primaryKey } from '../model'

export default {
  mixins: [Form('ruleForm', commanderModel)],
  data () {
    const asyncCheckCommanderConcatNumber = (rule, value, callback) => {
      return this.checkCommanderConcatNumber(
        {
          contactNumber: value,
          id: this.ruleForm[primaryKey]
        },
        {
          onOk ({ data }) {
            !data ? callback(new Error('团长联系电话已存在')) : callback()
          },
          onError ({ message }) {
            callback(new Error(message))
          }
        }
      )
    }

    return {
      ruleForm: Object.assign({}, commanderModel),
      rules: {
        groupLeaderCommunity: [
          {
            required: true,
            message: this.$t('required', { field: '所属社区' })
          }
        ],
        groupLeaderName: [
          {
            required: true,
            message: this.$t('required', { field: '团长名称' })
          }
        ],
        groupLeaderContactNumber: [
          {
            required: true,
            message: this.$t('required', { field: '团长联系电话' })
          },
          { validator: asyncCheckCommanderConcatNumber, trigger: 'blur' }
        ],
        groupLeaderAddressDetails: [
          {
            required: true,
            message: this.$t('required', { field: '团长详情地址' })
          }
        ]
      }
    }
  },
  methods: {
    // --------------------------------------  request --------------------------------------
    checkCommanderConcatNumber ({ contactNumber, id }, { onOk, onError }) {
      return this.Catch(checkCommanderConcatNumber, {
        onOk,
        onError
      })(null, contactNumber, id)
    }
    // -------------------------------------- !request --------------------------------------
  },
  computed: {},

  mounted () {
    this.watchSelect(
      'groupLeaderCommunity',
      'groupLeaderCommunityName',
      this.$attrs.communitySelects
    )
  }
}
</script>
